<template>
  <div class="app-container">
    <el-row class="top" :gutter="20">
      <el-col class="top-left" :span="24" :md="{span: 8}">
        <el-card class="box-card">
          <div slot="header">
            <span>| 概况</span>
          </div>
          <div class="search-block">
            <label>变电站名称：</label>
            <el-input class="input" size="mini"></el-input>
            <el-button class="button" icon="el-icon-search" size="mini" round></el-button>
          </div>
          <div class="item-content">
            <el-row :gutter="20">
              <el-col :span="8" >
                <div class="item" style="background-color: #48BAF8">
                  <div class="img">
                    <img src="@/assets/sub/sub7.png" alt="">
                  </div>
                  <span class="text">电压等级</span>
                  <span class="kv">10/0.4KV</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="item" style="background-color: #FF597FFF">
                  <div class="img">
                    <img src="@/assets/sub/sub25.png" alt="">
                  </div>
                  <span class="text">变压器台数</span>
                  <span class="kv" style="background-color: #ED4871">1台</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="item" style="background-color: #D9AE3D">
                  <div class="img">
                    <img src="@/assets/sub/sub9.png" alt="">
                  </div>
                  <span class="text">负荷率</span>
                  <span class="kv" style="background-color: #D29F39">15.18%</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="item" style="background-color: #60DAE8">
                  <div class="img">
                    <img src="@/assets/sub/sub9.png" alt="">
                  </div>
                  <span class="text">负荷率</span>
                  <span class="kv" style="background-color: #54C9DC">15.18%</span>
                </div>
              </el-col>
              <el-col :span="8" >
                <div class="item" style="background-color: #9F6CDE">
                  <div class="img">
                    <img src="@/assets/sub/sub9.png" alt="">
                  </div>
                  <span class="text">负荷率</span>
                  <span class="kv" style="background-color: #793FCD">15.18%</span>
                </div>
              </el-col>
              <el-col :span="8" >
                <div class="item" style="background-color: #5ECC66">
                  <div class="img">
                    <img src="@/assets/sub/sub9.png" alt="">
                  </div>
                  <span class="text">负荷率</span>
                  <span class="kv" style="background-color: #57BD4A">15.18%</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col class="top-center" :span="24" :md="{span: 8}">
        <el-card class="box-card">
          <div slot="header">
            <span>| 运行状态</span>
          </div>
          <div class="top-text">
            <span>更新时间：2021-04-23 12:15:27</span>
          </div>
          <div class="wrap">
            <div class="item">
              <div class="img">
                <img src="@/assets/sub/sub17.png" alt="">
              </div>
              <span class="text">有功功率</span>
              <span class="kv">85.1kW</span>
            </div>
            <div class="item">
              <div class="img">
                <img src="@/assets/sub/sub15.png" alt="">
              </div>
              <span class="text">无功功率</span>
              <span class="kv">-1.6kVar</span>
            </div>
            <div class="item">
              <div class="img">
                <img src="@/assets/sub/sub13.png" alt="">
              </div>
              <span class="text">环境温度</span>
              <span class="kv">21℃</span>
            </div>
            <div class="item">
              <div class="img">
                <img src="@/assets/sub/sub11.png" alt="">
              </div>
              <span class="text">环境温度</span>
              <span class="kv">77.9%</span>
            </div>
          </div>
          <el-row class="con-item-content" style="margin-top: 30px">
            <el-col :span="6">
              <div class="item" style="background-color: #FB9F9EFF">
                <div class="img">
                  <img src="@/assets/sub/sub7.png" alt="">
                </div>
                <span class="kv" style="background-color: #FB8382FF">配电图</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="item" style="background-color: #82A3E5FF">
                <div class="img">
                  <img src="@/assets/sub/sub7.png" alt="">
                </div>
                <span class="kv" style="background-color: #4477DDFF">视频</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="item" style="background-color: #CCE88EFF">
                <div class="img">
                  <img src="@/assets/sub/sub7.png" alt="">
                </div>
                <span class="kv" style="background-color: #92D400FF">变压器</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="item" style="background-color: #48BAF8">
                <div class="img">
                  <img src="@/assets/sub/sub7.png" alt="">
                </div>
                <span class="kv">通讯</span>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col class="top-right" :span="24" :md="{span: 8}">
        <div class="content box-card">
          <el-row class="top-right-top">
            <el-card class="">
              <div slot="header">
                <span>| 运行状态</span>
              </div>
              <el-row :gutter="12">
                <el-col :span="8">
                  <div class="item">
                    <label>环境温度</label>
                    <span>0次</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="item">
                    <label style="background-color: #FF6666FF">遥信变位</label>
                    <span>0次</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="item">
                    <label style="background-color: #3A6EFFFF">失联装置</label>
                    <span>0次</span>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-row>
          <el-row class="top-right-bottom">
            <el-card class="">
              <div slot="header">
                <span>| 运行状态</span>
              </div>
              <div class="top-rightBottom">
                <label>巡检时间：2020-10-20 17:57 - 2020-12-14 09:25</label>
                <label>巡 检 项：0 项</label>
                <label>缺 陷 项：0 项</label>
                <label>巡检人员：用户</label>
              </div>
            </el-card>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="bottom" :gutter="20" style="margin-top: 20px">
      <el-col class="bottom-left" :span="12">
        <el-card class="box-card">
          <div slot="header" class="header">
            <span>| 用电曲线</span>
            <div class="header-right">
              <span class="text">分时段</span>
              <el-divider direction="vertical"></el-divider>
              <span class="text">总用量</span>
            </div>
          </div>
          <dash-smooth :height="'400px'"></dash-smooth>
        </el-card>
      </el-col>
      <el-col class="bottom-right" :span="12">
        <el-card class="box-card">
          <div slot="header" class="header">
            <span>| 用电状况</span>
            <div>
              <span class="text">日</span>
              <el-divider direction="vertical"></el-divider>
              <span class="text">月</span>
              <el-divider direction="vertical"></el-divider>
              <span class="text">年</span>
            </div>
          </div>
          <div>
            <div class="item">
              <label>579.6 kW·h</label>
              <div class="point"></div>
            </div>
            <div class="item">
              <label>579.6 kW·h</label>
              <div class="point"></div>
            </div>
            <div class="item">
              <label>579.6 kW·h</label>
              <div class="point"></div>
            </div>
          </div>
          <div class="bottom-content">
            <div class="left">
              <span>11:00-11:15</span>
              <label>最大用电时间</label>
            </div>
            <div class="right">
              <span>91.2 kW</span>
              <label>该时段平均功率</label>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import { getList } from '@/api/substation'

import DashSmooth from '@/components/Charts/DashSmooth'
export default {
  components: { DashSmooth },
  data() {
    return {
    }
  },
  created() {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
  .box-card{
    height: 480px;
    ::v-deep .el-card__header{
      background-color: #4AADA9;
      color: #fff;
    }
  }
  .app-container{
    .top{
      .top-left{
        .search-block{
          padding: 0 12px 20px 12px;
          label{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
          }
          .input{
            width: 180px;
          }
          .button{
            background-color: #4AADA9;
            color: #fff;
            font-size: 18px;
            margin-left: 10px;
          }
        }

        .top-text{
          height: 30px;
          background-color: #F5F6FA;
          font-size: 14px;
          line-height: 30px;
        }
        .item-content{
          width: 100%;
          .item{
            margin: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-family: Microsoft YaHei;
            .img{
              width: 50px;
              height: 50px;
              margin-top: 25px;
              img{
                width: 100%;
              }
            }
            .text{
              margin-top: 9px;
              font-size: 12px;
            }
            .kv{
              width: 100%;
              height: 45px;
              display: block;
              background-color: #2E9FF6FF;
              margin-top: 14px;
              text-align: center;
              line-height: 45px;
              font-size: 18px;
              font-weight: 400;
            }
          }
        }
      }
      .top-center{
        .wrap{
          display: flex;
          justify-content: space-around;
          .item{
            display: flex;
            flex-direction: column;
            align-items: center;
            .img{
              width: 80px;
              height: 80px;
              margin-top: 25px;
              img{
                width: 100%;
              }
            }
            .text{
              margin-top: 9px;
              font-size: 12px;
            }
            .kv{
              width: 100%;
              height: 45px;
              display: block;
              margin-top: 14px;
              text-align: center;
              line-height: 45px;
              font-size: 18px;
              font-weight: bold;
            }
          }
        }
      }
      .top-right{
        .content{
          height: 480px; display: flex; flex-direction: column; justify-content: space-between;
          .top-right-top{
            .item{
              label{
                display: block;
                width: 100%;
                height: 70px;
                background-color: #39D09DFF;
                text-align: center;
                line-height: 70px;
                color: #fff;
              }
              span{
                display: block;
                width: 100%;
                height: 70px;
                background-color: #F5F6FAFF;
                text-align: center;
                line-height: 70px;
                color: #000;
                font-weight: bold;
              }

            }
          }
          .top-right-bottom{
            label{
              display: block;
              padding: 6px 0;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
            }
          }
        }

      }
    }
    .bottom{
      .bottom-left{
      }
      .bottom-right{
        .bottom-content{
          height: 50px;
          background-color: #2b2f3a;
          color: #fff;
          display: flex;
          transition: .3s linear;
          &:hover{
            transform: translateY(-40px);
            height: 88px;
            transition: .3s linear;
            cursor: pointer;
            .left, .right{
              span{
                font-size: 24px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                transition: .3s linear;
                margin-bottom: 8px;
              }
            }
          }
          .left, .right{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 50%;
            span{
              transition: .3s linear;
              font-size: 16px;
              font-family: Microsoft YaHei;
            }
          }
          .left{
            border-right: 1px solid #707070;
          }
          .right{
          }
        }
      }
      .item{
        transition: .3s linear;
        height: 100px;
      }
      .item:hover{
        transform: translateY(-10px);
        transition: .2s linear;
        cursor: pointer;
      }
      .item:nth-child(1){
        width: 100%;
        background-color: #F7F6FD;
        position: relative;
        margin-bottom: 20px;
        border: 1px solid #B4A3E9FF;
        border-radius: 6px;
        label{
          line-height: 100px;
          text-align: center;
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          position: absolute;
          margin-left: 65%;
        }
        &:before{
          position: absolute;
          content: '当日用电';
          line-height: 100px;
          text-align: center;
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          border-radius: 6px;
          color: #fff;
          display: block;
          width: 50%;
          height: 100%;
          background-color: #B4A3E9FF;
        }
        .point{
          position: absolute;
          display: block;
          width: 20px;
          height: 20px;
          transform: rotate(45deg) translate(-65%);
          background-color: #B4A3E9FF;
          top: 50%;
          left: 50%;
        }
      }
      .item:nth-child(2){
        width: 100%;
        background-color: #EAF9FB;
        border: 1px solid #2DC4D9FF;
        border-radius: 6px;
        position: relative;
        margin-bottom: 20px;
        label{
          line-height: 100px;
          text-align: center;
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          position: absolute;
          margin-left: 65%;
        }
        &:before{
          position: absolute;
          content: '昨日同期';
          line-height: 100px;
          text-align: center;
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          border-radius: 6px;
          color: #fff;
          display: block;
          width: 50%;
          height: 100%;
          background-color: #2DC4D9FF;
        }
        .point{
          position: absolute;
          display: block;
          width: 20px;
          height: 20px;
          transform: rotate(45deg) translate(-65%);
          background-color: #2DC4D9FF;
          top: 50%;
          left: 50%;
        }
      }
      .item:nth-child(3){
        width: 100%;
        background-color: #F4FBE5;
        border: 1px solid #92D400FF;
        position: relative;
        margin-bottom: 20px;
        border-radius: 6px;
        label{
          line-height: 100px;
          text-align: center;
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          position: absolute;
          margin-left: 65%;
        }
        &:before{
          position: absolute;
          content: '环比';
          line-height: 100px;
          text-align: center;
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          border-radius: 6px;
          color: #fff;
          display: block;
          width: 50%;
          height: 100%;
          background-color: #92D400FF;
        }
        .point{
          position: absolute;
          display: block;
          width: 20px;
          height: 20px;
          transform: rotate(45deg) translate(-65%);
          background-color: #92D400FF;
          top: 50%;
          left: 50%;
        }
      }
    }
  }

/*  公共*/
.con-item-content{
  .item{
    margin: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: Microsoft YaHei;
    .img{
      width: 50px;
      height: 50px;
      margin-top: 25px;
      img{
        width: 100%;
      }
    }
    .text{
      margin-top: 9px;
      font-size: 12px;
    }
    .kv{
      width: 100%;
      height: 45px;
      display: block;
      background-color: #2E9FF6FF;
      margin-top: 14px;
      text-align: center;
      line-height: 45px;
      font-size: 18px;
      font-weight: 400;
    }
  }
}

.header{
  display: flex;
  justify-content: space-between;
  .text{
    padding: 4px 6px;
    border-radius: 5px;
    &:hover{
      background-color: #CCEFEEFF;
      color: #01ADA8FF;
      cursor: pointer;
      transition: .3s linear;
    }
  }
}
</style>
